<template>
    <div id="casso">
        <div class="switchContainer">
            <h3 v-show="flag">编写学习记录</h3>
            <h3 v-show="!flag">编写备忘录</h3>
            <div style="text-align:center">
                <el-switch v-model="flag" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </div>
        </div>
        <div class="selectContainer">
            <el-select v-show="flag" size="small" v-model="fork">
                <el-option
                    v-for="item in forkList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
            <el-button
                v-show="flag"
                size="small"
                @click="centerDialogVisible=true"
                type="primary"
            >增加分类</el-button>
            <el-button size="small" @click="backToIndex" type="danger">返回首页</el-button>
            <!-- 增加分类弹框 -->
            <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
                <el-input size="small" v-model="newFork" placeholder="请输入新增分类..."></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addFork">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="titleInput">
            <el-input size="small" v-model="title" placeholder="请输入标题..."></el-input>
        </div>
        <vue-tinymce v-model="content" :setting="setting" />
        <div class="submiBtn">
            <el-button @click="resetData" size="small" type="info">重置</el-button>
            <el-button @click="saveArticel" size="small" type="success">保存</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            content: "",
            setting: {
                menubar: false,
                toolbar:
                    "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
                toolbar_drawer: "sliding",
                quickbars_selection_toolbar:
                    "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
                plugins: "link image media table lists fullscreen quickbars",
                language: "zh_CN",
                height: 600
            },
            fork: "",
            forkList: [],
            title: "",
            centerDialogVisible: false,
            newFork: "",
            flag: true,
            needChangeData: this.$route.params.datas,
            isRemark: this.$route.params.flag,
            isCreate: true,
            pk: null
        };
    },
    mounted() {
        // 页面加载从store里获取foklist数据
        let forks = this.$store.getters.getForkList;
        if (forks.length > 0) {
            forks.forEach(item => {
                let obj = { value: item.pk, label: item.forkName };
                this.forkList.push(obj);
            });
        } else {
        }

        if (this.needChangeData != null) {
            this.isCreate = false;
            // console.log(this.needChangeData);
            // 切换页面形态
            if (this.isRemark) {
                this.flag = false;
            } else {
                this.flag = true;
                this.fork = this.needChangeData.forkby.pk;
            }
            // 赋值--修改
            this.title = this.needChangeData.title;
            this.content = this.needChangeData.content;
            this.pk = this.needChangeData.pk;
        }
    },
    methods: {
        // 返回首页
        backToIndex() {
            this.$router.push({ name: "index" });
        },
        // 增加分类
        addFork() {
            if (this.newFork != "") {
                this.$ajax
                    .post("/forks/", { forkName: this.newFork })
                    .then(res => {
                        let obj = {
                            value: res.data.pk,
                            label: res.data.forkName
                        };
                        this.forkList.push(obj);
                        this.centerDialogVisible = false;
                        this.newFork = "";
                        this.$notify({
                            message: "新增分类成功!",
                            type: "success"
                        });
                    })
                    .catch(err => {
                        this.$notify({
                            message: "新增分类时网络错误!",
                            type: "warning"
                        });
                    });
            } else {
                this.$notify({
                    message: "请输入内容!",
                    type: "warning"
                });
            }
        },
        // 重置数据
        resetData() {
            this.content = "";
            this.title = "";
            this.fork = "";
        },
        // 保存创建文章
        saveArticel() {
            if (this.isCreate) {
                if (this.flag) {
                    if (
                        this.content != "" &&
                        this.title != "" &&
                        this.fork != ""
                    ) {
                        let postData = {
                            forkby: this.fork,
                            title: this.title,
                            content: this.content
                        };
                        this.$ajax
                            .post("/article/", postData)
                            .then(res => {
                                this.content = "";
                                this.title = "";
                                this.fork = "";
                                this.$notify({
                                    message: "新增文章成功!",
                                    type: "success"
                                });
                            })
                            .catch(err => {
                                this.$notify({
                                    message: "保存创建文章时网络错误!",
                                    type: "warning"
                                });
                            });
                    } else {
                        this.$notify({
                            message: "请补全数据!",
                            type: "warning"
                        });
                    }
                } else {
                    if (this.content != "" && this.title !== "") {
                        let postData = {
                            title: this.title,
                            content: this.content
                        };
                        this.$ajax
                            .post("/remarks/", postData)
                            .then(res => {
                                // console.log(res.data);
                                this.content = "";
                                this.title = "";
                                this.$notify({
                                    message: "新增备忘录成功!",
                                    type: "success"
                                });
                            })
                            .catch(err => {
                                this.$notify({
                                    message: "新增备忘录时网络错误!",
                                    type: "warning"
                                });
                            });
                    } else {
                        this.$notify({
                            message: "请补全数据!",
                            type: "warning"
                        });
                    }
                }
            } else {
                if (this.flag) {
                    if (
                        this.content != "" &&
                        this.title != "" &&
                        this.fork != ""
                    ) {
                        let postData = {
                            forkby: this.fork,
                            title: this.title,
                            content: this.content
                        };
                        this.$ajax
                            .put("/article/" + this.pk + "/", postData)
                            .then(res => {
                                this.content = "";
                                this.title = "";
                                this.fork = "";
                                this.$notify({
                                    message: "修改文章成功!",
                                    type: "success"
                                });
                            })
                            .catch(err => {
                                this.$notify({
                                    message: "修改文章时网络错误!",
                                    type: "warning"
                                });
                            });
                    } else {
                        this.$notify({
                            message: "请补全数据!",
                            type: "warning"
                        });
                    }
                } else {
                    if (this.content != "" && this.title !== "") {
                        let postData = {
                            title: this.title,
                            content: this.content
                        };
                        this.$ajax
                            .put("/remarks/" + this.pk + "/", postData)
                            .then(res => {
                                // console.log(res.data);
                                this.content = "";
                                this.title = "";
                                this.$notify({
                                    message: "修改备忘录成功!",
                                    type: "success"
                                });
                            })
                            .catch(err => {
                                this.$notify({
                                    message: "修改备忘录时网络错误!",
                                    type: "warning"
                                });
                            });
                    } else {
                        this.$notify({
                            message: "请补全数据!",
                            type: "warning"
                        });
                    }
                }
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.selectContainer {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
.titleInput {
    display: flex;
    justify-content: center;
    width: 30%;
    margin: 0 auto;
    margin-bottom: 15px;
    .el-input {
        width: 100%;
    }
}
.submiBtn {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
.switchContainer {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
h3 {
    font-size: 16px;
    margin: 10px;
    font-family: "微软雅黑";
    opacity: 0.8;
}
</style>